<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制定入库单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/plugin/iview/dist/styles/iview.css">
    <!--element-ui/css-->
    <link rel="stylesheet" href="../../../lib/plugin/element-ui/style/index.css">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">

</head>
<body>

<div class="layuimini-container" id="app">
    <div class="layuimini-main">

        <!--数据表格-->
        <i-table :loading="loading" border :columns="columns" :data="Tabledata">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <i-button type="primary" size="small" style="margin-right: 5px" icon="md-return-right"
                          @click="openDialog"> 入 库 调 度
                </i-button>
            </template>
        </i-table>
        <!--数据表格-->

        <!--分页-->
        <el-pagination
                style="margin-top: 20px;"
                background
                :current-page="page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                @size-change="sizeChange"
                @current-change="onChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot	"
                :total="total">
        </el-pagination>
        <!--分页-->

        <!--抽屉-->
        <Drawer
                width="60%"
                title="入库调度单" :closable="false" v-model="Drawervalue">
            <i-form ref="storageSchedulingForm" inline>
                <Row :gutter="16">
                    <i-col span="12">
                        入库单编号：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                    <i-col span="12">
                    </i-col>
                </Row>
                <Row style="margin-top: 20px" :gutter="16">
                    <i-col span="12">
                        &nbsp;&nbsp;&nbsp;&nbsp;入库理由：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                    <i-col span="12">
                        入库详细理由：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                </Row>

                <Row style="margin-top: 20px" :gutter="16">
                    <i-table border :columns="storageColumns" :data="storageData"></i-table>
                </Row>

                <Row style="margin-top: 20px" :gutter="16">
                    <i-col span="12">
                        应入库总件数：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                    <i-col span="12">
                        应入库总成本：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                </Row>
                <Row style="margin-top: 20px" :gutter="16">
                    <i-col span="12">
                        已入库总件数：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                    <i-col span="12">
                        已入库总成本：
                        <i-input style="width: 300px" :disabled="true"></i-input>
                    </i-col>
                </Row>
            </i-form>

        </Drawer>
        <!--抽屉-->
    </div>
</div>

<!--jq-->
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script src="../../../lib/plugin/vue/vue.min.js"></script>
<script src="../../../lib/plugin/iview/dist/iview.min.js"></script>
<!--element-ui/index.js-->
<script src="../../../lib/plugin/element-ui/index.js"></script>

<!--layui-->
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

<!--axios-->
<script src="../../../lib/plugin/axios/axios.min.js"></script>

<!--系统文件-->
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>

<script>
    let api4 = 'http://127.0.0.1:8004/';
    let vue;

    // 入口函数
    $(function () {
        // http request 拦截器
        axios.interceptors.request.use(
            config => {
                if (token) { //判断token是否存在
                    config.headers.token = $.cookie("TOKEN");  //将token设置成请求头
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        );

        // 初始化Vue
        vue = new Vue({
            // 控制区域
            el: '#app',
            // 数据
            data: {
                total: 9,
                page: 1,
                pageSize: 10,
                loading: true,
                activeName: 'one',
                Drawervalue: false,
                columns: [
                    {title: '入库单编号', key: 'inboundId', align: 'center',},
                    {title: '入库理由', key: 'reason', align: 'center',},
                    {title: '登记时间', key: 'registerTime', align: 'center',},
                    {title: '总件数', key: 'amountSum', align: 'center',},
                    {title: '总金额(元)', key: 'costPriceSum', align: 'center',},
                    {title: '入库调度', slot: 'action', width: 150, align: 'center'}
                ],
                Tabledata: [],
                storageColumns: [
                    {title: '序号', align: 'center', key: 'name'},
                    {title: '产品名称', key: 'age', align: 'center',},
                    {title: '产品编号', key: 'address', align: 'center',},
                    {title: '应入库件数', key: 'address', align: 'center',},
                    {title: '已入库件数', key: 'address', align: 'center',},
                    {title: '存放地址集合', key: 'address', align: 'center',},
                    {title: '调度', key: 'address', align: 'center',},
                ],
                storageData: []
            },
            // 方法
            methods: {
                openDialog(){
                    this.Drawervalue = true
                },
                sizeChange(val) {
                    this.pageSize = val;
                    this.initTableDataOne();
                },
                onChange(val) {
                    this.page = val;
                    this.initTableDataOne();
                },
                initTableDataOne() {
                    this.loading = true;
                    axios.get(api4 + "warehouseInbound/queryInboundLimit?page="+this.page+"&limit="+this.pageSize+"&checkTag=1").then(res=>{
                        this.Tabledata = res.data.data;
                        this.loading = false;
                    }).catch(err=>{
                        this.$Message.error('服务器繁忙，请稍后再试！');
                    })
                }
            },
            // 钩子函数
            mounted() {
                this.initTableDataOne();
            }
        })
    });
</script>
</body>
</html>
